<template>
  <div>
    <!-- 生命周期
         创建期(执行一次)
             创建前：beforeCreate(实例化还没完成，不能访问data与methods等)
             创建后：created(实例化已完成，可以访问data与methods等，常用于进入页面接口请求)
         渲染期(执行一次)
             渲染前：beforeMount(读取了template内容，但是还没完成渲染)
             渲染后：mounted(渲染已完成，常用于进入页面的dom获取等操作)
         更新期(可能多次)
             更新前：beforeUpdate(vue页面中使用的相关数据已修改，但是还没有完成更新)
             更新后：updated(vue页面中使用的相关数据已修改，且完成渲染)
         销毁期(执行一次)
              销毁前：beforeDestroy(还没有销毁，什么都可访问，常用于善后工作（清除定时器之类）)
              销毁后：destroyed(还是可以访问data与methods等，只是不能访问vue渲染后的dom)
         缓存期(keep-alive缓存的组件)(可能多次)
              激活时：activated(显示时)
              隐藏时：deactivated
              接口较费性能,希望减少该页面接口请求，缓存该页面
 -->
    <h1 ref="h1">生命周期</h1>
    <h2>{{ num }}</h2>
    <button @click="numSet">修改num</button>
    <hr />
    <HmSon :xxx="num"></HmSon>
  </div>
</template>
<script>
import HmSon from './components/HmSon.vue'
export default {
  components: {
    HmSon
  },
  data () {
    return {
      num: 1,
      id: null
    }
  },
  beforeCreate () {
    console.log('1:父的beforeCreate')
  },
  created () {
    console.log('2:父的created')
    // this.id = setInterval(() => {
    //   console.log('setInterval')
    // }, 1000)
    // setTimeout(() => {
    //   console.log(this.$refs.h1)
    // }, 1000)
  },
  beforeMount () {
    console.log('3:父的beforeMount')
  },
  mounted () {
    console.log('8:父的mounted')
  },
  beforeUpdate () {
    console.log('父:beforeUpdate')
  },
  updated () {
    console.log('父:updated')
  },
  beforeDestroy () {
    console.log('about:beforeDestroy')
  },
  destroyed () {
    console.log('about:destroyed')
  },
  activated () {
    console.log('activated:显示时')
  },
  deactivated () {
    console.log('deactivated:隐藏时')
  },
  methods: {
    numSet () {
      this.num++
    }
  }
}
</script>
<style></style>
